<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <template v-for="(item, index) in $getBreadCrumbsName($route.path)">
                    <ask-breadcrumb-item :key="index" v-if="item.path" :to="'/' + item.path">{{ item.meta.title }}</ask-breadcrumb-item>
                    <ask-breadcrumb-item :key="index" v-else>{{ item.meta.title }}</ask-breadcrumb-item>
                </template>
            </ask-breadcrumb>
        </template>
        <el-input class="search-input" v-model="form.keyword" @keyup.enter.native="searchData" placeholder="请输入要检索的表单名称"></el-input>
        <el-radio-group class="tableType-btn" v-model="tableType" @change="checkTableType">
            <el-radio-button label="all">全部</el-radio-button>
            <el-radio-button label="other">待处理上报<span class="num">{{ waitNumber }}</span></el-radio-button>
            <el-radio-button label="finish">已完成上报</el-radio-button>
        </el-radio-group>
        <div class="department-list">
            <el-collapse v-model="activeNames" accordion>
                <template v-for="(item, index) in tableData">
                    <el-collapse-item :title="item.title" :name="index" :key="index">
                        <ul class="form-list">
                            <li v-for="(it, i) in item.children" :key="i">
                                <el-link icon="el-icon-s-order" :title="it.name"><span>{{ it.name }}</span></el-link>
                            </li>
                        </ul>
                    </el-collapse-item>
                </template>
            </el-collapse>
        </div>
        <ask-empty-text
            style="min-height: 400px;"
            v-if="tableData.length === 0">
        </ask-empty-text>
    </page-box>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class DeclareListVillage extends Vue {
    tableData = [
        {
            title: "科室一",
            children: [
                {
                    name: "表单1表单1表单1表单1表单1表单1表单1表单1表单1表单1表单1表单1表单1表单1表单1表单1"
                },
                {
                    name: "表单2"
                },
                {
                    name: "表单3"
                },
                {
                    name: "表单4"
                },
                {
                    name: "表单5"
                },
                {
                    name: "表单6"
                },
                {
                    name: "表单7"
                }
            ]
        },
        {
            title: "科室二",
            children: [
                {
                    name: "表单1"
                },
                {
                    name: "表单2"
                }
            ]
        },
        {
            title: "科室三",
            children: [
                {
                    name: "表单1"
                },
                {
                    name: "表单2"
                },
                {
                    name: "表单1"
                },
                {
                    name: "表单2"
                },
                {
                    name: "表单1"
                },
                {
                    name: "表单2"
                }
            ]
        },
        {
            title: "科室一",
            children: [
                {
                    name: "表单1"
                },
                {
                    name: "表单2"
                },
                {
                    name: "表单3"
                },
                {
                    name: "表单4"
                },
                {
                    name: "表单5"
                },
                {
                    name: "表单6"
                },
                {
                    name: "表单7"
                }
            ]
        },
        {
            title: "科室二",
            children: [
                {
                    name: "表单1"
                },
                {
                    name: "表单2"
                }
            ]
        },
        {
            title: "科室三",
            children: [
                {
                    name: "表单1"
                },
                {
                    name: "表单2"
                },
                {
                    name: "表单1"
                },
                {
                    name: "表单2"
                },
                {
                    name: "表单1"
                },
                {
                    name: "表单2"
                }
            ]
        }
    ]

    form = {
        keyword: ""
    }

    // 待上报数量
    waitNumber = 122
    tableType = "all"
    activeNames = ""

    // 获取表格数据
    getTable() {
        console.log(1);
    }

    detailRow(row: any) {
        console.log(row);
    }

    checkTableType() {
        this.getTable();
    }

    searchData() {
        console.log(this.form.keyword);
    }
}
</script>

<style lang="scss" scoped>
.search-input {
    margin: 5px 20px;
}
.tableType-btn {
    margin: 0 20px;
    .num {
        color: #f00;
        margin-left: 4px;
        font-size: 14px;
        font-weight: bold;
    }
}
.department-list {
    padding: 0 20px;
    ::v-deep {
        .el-collapse {
            @include flexLayout(flex,justify,normal);
            flex-wrap: wrap;
            .el-collapse-item {
                width: 48%;
                .form-list {
                    @include flexLayout(flex,normal,normal);
                    flex-wrap: wrap;
                    li {
                        width: 33%;
                        a {
                            width: 100%;
                            .el-link--inner {
                                width: calc(100% - 20px);
                                @include textEllipsis();
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
